<template>
    <div class="my-order-body">
			<div class="my-order">
				<div class="order-title">
					<span>我的订单</span>
					<span>请谨防钓鱼链接或诈骗电话，</span>
					<a href="#">了解更多></a>
				</div>
				<div class="order-statu">
					<span><a href="#">全部有效订单</a></span>
					<span class="line-order">|</span>
					<span><a href="#">待支付</a></span>
					<span class="line-order">|</span>
					<span><a href="#">待收货</a></span>
					<span class="line-order">|</span>
					<span><a href="#">已关闭</a></span>
					<div class="order-input">
						<input type="text" placeholder="输入商品名称、商品编号、订单号"/>
						<input type="submit" value="&#xe622;" class="iconfont"/>
					</div>
				</div>
				<div class="order-form">
					<div>
						<span class="isReceive">{{state}}</span>
					</div>
					<div>
						<span>{{date}}</span>
						<span>{{time}}</span>
						<span>{{uname}}</span>
						<span>订单号：{{orderNum}}</span>
						<span>{{payWay}}</span>
						<span>订单金额：48.90元</span>
					</div>
					<div>
						<img :src="imgUrl[0]" alt="#" />
						<div class="instrucate">
							<p>{{title[0]}} {{proColor[0]}}</p>
							<p>{{proPrice[0]}}元 × {{proCount[0]}}</p>
						</div>
						<div class="btn-order">
							<a href="#"><button>订单详情</button></a><br />
							<a href="#"><button>申请售后</button></a>
						</div>
					</div>
					<div>
						<img :src="imgUrl[1]" alt="#" />
						<div class="instrucate">
							<p>{{title[1]}} {{proColor[1]}}</p>
							<p>{{proPrice[1]}}元 × {{proCount[1]}}</p>
						</div>
					</div>
				</div>
			</div>
		</div>
</template>



<script>

	const Mock = require('mockjs')
	Mock.mock('order',()=>{
		return{noPayCount:2,noReceiveCount:5,noEvaluateCount:10,favCount:20}
	})
	Mock.mock('orderDetail',()=>{
		return {
			state:'未收货',
			date:'2018年5月3日',
			time:' 12:05',
			uname:'张三',
			orderNum:'45612189561432',
			payWay:'货到付款',
			imgUrl:[require('../../assets/img/111.jpg'),require('../../assets/img/222.jpg')],
			title:['小米手环2腕带','MIX 2全陶瓷版极简保护壳'],
			proColor:['石墨黑','黑色'],
			proPrice:['19.9','19'],
			proCount:[1,2]
		}
	})
    export default{
		data(){
			return{
				state:'',
				date:'',
				time:'',
				uname:'',
				orderNum:'',
				payWay:'货到付款',
				imgUrl:[],
				title:[],
				proColor:[],
				proPrice:[],
				proCount:[]
			}
		},
		methods:{
			getOrderMsg(){
				this.axios.get('orderDetail').then((res)=>{
					this.state = res.data.state;
					this.dateTime = res.data.dateTime;
					this.uname = res.data.uname;
					this.orderNum = res.data.orderNum;
					this.payWay = res.data.payWay;
					this.title = res.data.title;
					this.proColor = res.data.proColor;
					this.proPrice = res.data.proPrice;
					this.proCount = res.data.proCount;
					this.imgUrl = res.data.imgUrl;
				}).catch((err)=>{	
					throw err;
				});
			}
		},
		mounted(){
			this.getOrderMsg();
		}
	}

</script>

<style scoped>

.my-order-body{
	width: 1200px;
	margin: 0 auto;
	vertical-align: top;
}
.order-left{
	display: inline-block;
	width: 20%;
	height: 500px;
	background: #FFFFFF;
	vertical-align: top;
}
.my-order{
	display: inline-block;
	width: 75%;
	background: #FFFFFF;
}
.my-order span{
	display: inline-block;
}
.order-title>span:nth-child(1),.order-form>div:nth-child(1)>span{
	color: #757575;
	font-size: 30px;
}
.order-title{
	padding: 40px 0;
	padding-left: 40px;
}
.order-statu{
	padding-left: 40px;
}
.order-statu a:hover{
	color: #333333;
}
.order-statu a{
	font-size: 16px;
}
.line-order{
	color: #E0E0E0;
	margin-left: 10px;
	margin-right: 10px;
}
.order-input{
	display: inline-block;
	margin-left: 170px;
	border: 1px solid #E0E0E0;
}
.order-input input:first-child{
	padding: 0px ;
	width: 222px;
	height: 40px;
	outline: none;
	border: none;
	vertical-align: top;
	margin-left: 10px;
}
.iconfont{
	width: 40px;
	height: 40px;
	border: none;
}
.order-form{
	margin: 0 auto;
	border: 1px solid #B0B0B0;
	width: 770px;
	padding-left: 50px;
	margin-top: 10px ;
	margin-bottom: 100px;
}
.instrucate{
	display: inline-block;
}
.order-form p{
	display: block;
	margin-top:10px;
}
.isReceive{
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
}
.btn-order{
	display: inline-block;
	margin-left: 420px;
}
.btn-order>a{
	display: block;
	margin-top: 20px;
}
</style>

